<script setup>
import { getUserDynamicListService,getDynamicfindByTitle,getAttentionDynamic } from "@/api/dynamic";
import { useRoute,useRouter } from 'vue-router';
import { ref,watch } from "vue";
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
// import { useRoute } from "vue-router";
// import {getDynamicfindByTitle} from "@/api/dynamic"
// import { useUserStore } from "@/stores/user";



const dynamics = ref([]);
const button_1=ref("primary")
const button_2=ref("")
 const route = useRoute();
 const router = useRouter();

 watch(route,(to,from)=>{
  router.go(0)
  console.log(to,from)
  getDynamics(0)
 })

 //分页条数据模型
const pageNum = ref(1)//当前页
const total = ref(20)//总条数
const pageSize = ref(3)//每页条数
const getDynamics = async (select) => {
  
  //推送动态
  if (select == 0) {
    button_1.value="primary"
  button_2.value=""
    //搜索栏查询
    if(route.query.title){
      console.log(route.query.title)
      const res = await getDynamicfindByTitle(route.query.title)
      dynamics.value = res.data.list;
      return
    }
    
    const res = await getUserDynamicListService(pageNum.value,pageSize.value);
    console.log(res);
    dynamics.value = res.data.list;
    total.value=res.data.total
  }else{//关注动态
    button_1.value=""
    button_2.value="primary"
    const res = await getAttentionDynamic(pageNum.value,pageSize.value);
    console.log(res);
    dynamics.value = res.data.list;
    total.value=res.data.total
    
  }
};

//当每页条数发生了变化，调用此函数
const onSizeChange = (size) => {
    pageSize.value = size
    pageNum.value = 1
    if(button_1.value=="primary"){
      getDynamics(0);
    }else{
      getDynamics(1);
    }

}
//当前页码发生变化，调用此函数
const onCurrentChange = (num) => {
    pageNum.value = num
    if(button_1.value=="primary"){
      getDynamics(0);
    }else{
      getDynamics(1);
    }
}

const getpush=()=>{
  pageNum.value=1
  pageSize.value=3
  getDynamics(0)
}

const getfollow=()=>{
  pageNum.value=1
  pageSize.value=3
  getDynamics(1)
}
getDynamics(0);

</script>
<template>
  <el-row :gutter="20">
    <el-col :span="12">
      <div>
        <el-button @click="getpush()" style="width: 100%" :type="button_1"
          >推送</el-button
        >
      </div>
    </el-col>
    <el-col :span="12">
      <div>
        <el-button @click="getfollow()" style="width: 100%" :type="button_2"
          >关注</el-button
        >
      </div>
    </el-col>
  </el-row>

  <div style="width: 100% ">
    <DynamicShow
      v-for="dynamic in dynamics"
      :key="dynamic.dynamicId"
      :dynamic="dynamic"
    ></DynamicShow>
    <el-empty v-if="dynamics.length==0" description="空空如也" />

    <el-config-provider :locale="zhCn" >
    <el-pagination v-if="!route.query.title && dynamics.length>0"  v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[3, 5, 7]"
            layout="jumper, total, sizes, prev, pager, next" background :total="total" @size-change="onSizeChange"
            @current-change="onCurrentChange" style="margin-top: 20px; justify-content: center" />
    
  </el-config-provider>
  </div>
</template>
<style></style>
